導覽列

在這個範例中要練習導覽列的切版

整理幾個小重點如下方：

1.將section設為滿版，添加背景色#FFEBF2
2.nav，做為固定欄寬1280px的區塊，並設定display: flex讓資料橫排顯示
3.使用justify-content: space-between平均分配剩餘空間寬度，讓第一個項目和最後一個項目貼齊邊緣
4.使用align-items: center對齊交錯軸線正中間
5.在超連結a添加text-decoration: none的設定，目的是消除一個超連結預設的底線
6.通常一個網頁的h1標籤大多會用在logo上，但因為LOGO是圖片，為了讓他符合語意會添加span標籤寫上文字
7.span標籤的文字如何在頁面中不顯示，這邊我們將span的寬高都設為1px(width: 1px; height: 1px;)，再將超出的地方消失(overflow: hidden;)，最後使用絕對定位(position: absolute;)即可完成
8.只有第一個超連結項目預設有下底線，其餘的超連結項目都是在滑鼠游標移至項目後才會跑出下底線，使用選取器:nth-child()或是:first-child，括號內填入項目的順序，這裡寫為.nav li:nth-child(1) a或是.nav li:first-child，滑鼠游標移至項目後才會跑出下底線寫為.nav li a:hover
9.超連結項目後方皆有小三角形，使用偽元素::after去製作，偽元素要添加content: ''接下來的調整才會顯示
10.除了第一個超連結項目，其餘的超連結項目後方皆有小三角形，使用:not(:first-child)選取器，排除指定的第一個項目，寫為.nav li:not(:first-child) a::after
11.偽元素是inline物件，需要添加設定display: block，接下來尺寸的設定才會有效果，使用border (邊框) 屬性補充繪製出三角形，原理方法可以參考[DAY25]網頁切版入門及版面實作_對話框&三角形的解說
12.在此範例設定border-top:5px solid #464646，再將height 與 width 設為 0，因為只需要一個向下的三角形，因此把把右、左、下三邊的border顏色改設定為透明transparent即可完成
13.在.nav li:not(:first-child) a::after內添加屬性position: absolute (絕對定位)讓他抽出來獨立一層，偏移至適當的位子，並且在a::after的父層.nav a內添加position: relative (相對定位)，作為子層定位的依據
14.超連結按鈕btn部分添加背景色#464646，導圓角以及使用padding調整內距

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/QWrEzyd

HTML

<section>
    <div class="nav">
        <div class="logo">
            <h1>
                <span>IMPERION</span>
            <a href="#" ><img src="https://i.ibb.co/86SKRmY/mini-logo.png" alt=""></a>
            </h1>
        </div>
        <div class="navbar">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">PAGES</a></li>
                <li><a href="#">FEATURES</a></li>
                <li><a href="#">NEWS</a></li>
                <li><a href="#">SHOP</a></li>
                <a href="#" class="btn">GET IN TOUCH</a>
            </ul>
        </div>
        
    </div>
</section>

CSS

section{
    width: 100%;
    margin: auto;
    background-color: #FFEBF2;
    
}
.nav{
    width: 1280px;
    margin: auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav ul{
    display: flex;
    align-items: center;
    padding: 20px 0;
}
.nav li{
    padding: 0 10px;
}
.nav a{
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: #464646;
    margin: 0 15px;
    position: relative;
}
.nav .logo h1 span{
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
}
.nav .logo img{
    vertical-align: middle;
}
.nav li:nth-child(1) a{
    border-bottom: 1px solid #464646;
} 
.nav li a:hover{
    border-bottom: 1px solid #464646;
    transition: .3s;
}
.nav li:not(:first-child) a::after{ 
    content: '';
    position: absolute;
    display: block;
    right: -15px;
    top:7px;
    height: 0px;
    width: 0px;
    border-top:5px solid #464646;
    border-bottom:4px solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    } 

.nav .btn{
    padding: 20px 30px;
    border: 1px solid #464646;
    border-radius: 5px;
}
.nav .btn:hover{
    border: 1px solid #f7b1b1;
    background-color: #f7b1b1;
    transition: .3s;
}